<template>
  <div class="index-container">
    <div class="list-wrap">
      <scroll-view scroll-y="true" @scrolltolower="loadMore" style="height:100%;">
        <!--搜索-->
        <search/>

        <!--Banner-->
        <swiper class="slider" :indicator-dots="true" :autoplay="autoplay" :interval="5000" :duration="1000" v-if="banners.length > 0">
          <swiper-item v-for="(banner,i) in banners" :key="i">
            <a :href="banner.page" class="slider__navi">
              <image :src="banner.image" class="slider-image"/>
            </a>
          </swiper-item>
        </swiper>

        <!--人气技师-->
        <div v-if="data1.length > 0" style="margin-bottom: 0.5rem;">
          <div class="title-bar">
            <span class="model-label">人气技师</span>
            <span class="model-more">查看全部</span>
          </div>

          <scroll-view scroll-x class="scroll-header">
            <view  class="scroll-view-item">
              <img class="pic" src="https://cdnbdimg.tatagou.com.cn/20160811-57abe78f106ed.jpg" style="position: absolute; top: 1.5rem; left: 2.5rem;width: 4rem; height: 4rem; border-radius: 2rem;"/>
              <div style="position: absolute; top: 5.5rem; width: 8rem; height: 3rem;font-size: 0.9rem; border-radius: 1.5rem; text-align: center">
                烫发达人
              </div>
              <div style="position: absolute; color: #8E8E8E; top: 8rem; width: 8rem; height: 3rem; line-height: 1.2rem; border-radius: 1.5rem; font-size: 0.8rem; text-align: center">
                <p>接单数 <span style="color: #FF5C1C">712</span></p>
                <p>接单数 <span style="color: #FF5C1C">712</span></p>
              </div>
            </view>
            <view class="scroll-view-item">
              <img class="pic" src="https://cdnbdimg.tatagou.com.cn/20160811-57abe78f106ed.jpg" style="position: absolute; top: 1.5rem; left: 2.5rem;width: 4rem; height: 4rem; border-radius: 2rem;"/>
              <div style="position: absolute; top: 5.5rem; width: 8rem; height: 3rem;font-size: 0.9rem; border-radius: 1.5rem; text-align: center">
                烫发达人
              </div>
              <img class="pic" src="https://cdnbdimg.tatagou.com.cn/20160811-57abe78f106ed.jpg" style="position: absolute; top: 1.5rem; left: 2.5rem;width: 4rem; height: 4rem; border-radius: 2rem;"/>

              <div style="position: absolute; color: #8E8E8E; top: 8rem; width: 8rem; height: 3rem; line-height: 1.2rem; border-radius: 1.5rem; font-size: 0.8rem; text-align: center">
                <p>接单数 <span style="color: #FF5C1C">712</span></p>
                <p>接单数 <span style="color: #FF5C1C">712</span></p>
              </div>
            </view>
            <view class="scroll-view-item">
              <img class="pic" src="https://cdnbdimg.tatagou.com.cn/20160811-57abe78f106ed.jpg" style="position: absolute; top: 1.5rem; left: 2.5rem;width: 4rem; height: 4rem; border-radius: 2rem;"/>

              <img class="pic" src="https://cdnbdimg.tatagou.com.cn/20160811-57abe78f106ed.jpg" style="position: absolute; top: 1.5rem; left: 2.5rem;width: 4rem; height: 4rem; border-radius: 2rem;"/>
              <div style="position: absolute; top: 5.5rem; width: 8rem; height: 3rem;font-size: 0.9rem; border-radius: 1.5rem; text-align: center">
                烫发达人
              </div>
              <div style="position: absolute; color: #8E8E8E; top: 8rem; width: 8rem; height: 3rem; line-height: 1.2rem; border-radius: 1.5rem; font-size: 0.8rem; text-align: center">
                <p>接单数 <span style="color: #FF5C1C">712</span></p>
                <p>接单数 <span style="color: #FF5C1C">712</span></p>
              </div>
            </view>
          </scroll-view>
        </div>

        <!--附近技师-->
          <div class="title-bar">
            <span class="model-label">附近技师</span>
            <span class="model-more">查看全部</span>
          </div>
          <card v-for="(nearby_hairdresser, idx) in nearby_hairdresser_list" :key="idx"
                :avatar="nearby_hairdresser.avatar"
                :name="nearby_hairdresser.name"
                :seniority="nearby_hairdresser.seniority"
                :mono="nearby_hairdresser.mono"
                :items="nearby_hairdresser.items"/>

      </scroll-view>
    </div>



    <!--<div class="userinfo" @click="bindViewTap">-->
      <!--<img class="userinfo-avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover" />-->
      <!--<div class="userinfo-nickname">-->
        <!--<card :text="userInfo.nickName"></card>-->
      <!--</div>-->
    <!--</div>-->

    <!--<div class="usermotto">-->
      <!--<div class="user-motto">-->
        <!--<card :text="motto"></card>-->
      <!--</div>-->
    <!--</div>-->

    <!--<form class="form-container">-->
      <!--<input type="text" class="form-control" v-model.lazy="motto" placeholder="v-model.lazy" />-->
    <!--</form>-->
    <!--<a href="/pages/counter/main" class="counter">去往Vuex示例页面</a>-->
  </div>
</template>

<script>
  import search from "./header";
  import card from '@/components/card'

export default {
  data () {
    return {
      banners: [
        {image: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'},
        {image: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'},
        {image: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'},
      ],

      data1: [ 1],

      nearby_hairdresser_list: [
        {
          id: 1,
          avatar: 'https://cdnbdimg.tatagou.com.cn/20160811-57abe78f106ed.jpg',
          name: '托尼韩',
          seniority: 2,
          mono: '我从业10年，有许多擅长的设计手 法，在我手下设计过李大大，张西 西西等的发型设计，参加过国...',
          items: []
        },
        {
          id: 1,
          avatar: 'https://cdnbdimg.tatagou.com.cn/20160811-57abe78f106ed.jpg',
          name: '托尼',
          seniority: 2,
          mono: '我从业10年，有许多擅长的设计手 法，在我手下设计过李大大，张西 西西等的发型设计，参加过国...',
          items: []
        },
        {
          id: 1,
          avatar: 'https://cdnbdimg.tatagou.com.cn/20160811-57abe78f106ed.jpg',
          name: '托尼',
          seniority: 2,
          mono: '我从业10年，有许多擅长的设计手 法，在我手下设计过李大大，张西 西西等的发型设计，参加过国...',
          items: []
        }
      ],

      userInfo: {}
    }
  },

  components: {
    card, search
  },

  methods: {
    bindViewTap () {
      const url = '../logs/main'
      wx.navigateTo({ url })
    },
    getUserInfo () {
      // 调用登录接口
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: (res) => {
              this.userInfo = res.userInfo
            }
          })
        }
      })
    },
    clickHandle (msg, ev) {
      console.log('clickHandle:', msg, ev)
    }
  },

  created () {
    // 调用应用实例的方法获取全局数据
    this.getUserInfo()
  }
}
</script>

<style scoped>
  .list-wrap {
    height: 100%;
  }
</style>

<style>
  page,
  .index-container {
    height: 100%;
    background-color: #F8F8F8;
  }

  .title-bar {
    display: block;
    height: 0.7rem;
    background-color: white;
  }

  .model-label {
    height: 0.7rem;
    font-size: 0.34rem;
    float: left;
    color: rgba(51,51,51,1);
    line-height:0.7rem;
    margin-left: 0.3rem;
  }
  .model-more {
    height:0.7rem;
    font-size:0.27rem;
    float: right;
    color:rgba(140,140,140,1);
    line-height:0.7rem;
    margin-right: 0.3rem;
  }

  .slider {
    width: 7.5rem;
    height: 3.1rem;
    margin-bottom: 0.16rem;
  }

  .slider image {
    height: 100%;
    width: 100%;
  }

  .slider__navi {
    height: 100%;
    width: 100%;
  }

  .mono {
    height:1.12rem;
    font-size:0.28rem;
    color:rgba(142,142,142,1);
    /*line-height:0.42rem;*/
  }


  .scroll-header {
    display: flex;
    white-space: nowrap;
  }
  .scroll-view-item {
    height: 3.8rem;
    width: 3rem;
    margin: 0.2rem;
    border-radius: 0.2rem;
    background: white;
    display: inline-block;
  }

  .scroll-view-item .pic {
    float: none;
    margin: 0 auto;
    width: 50%;
    height: 50%;
  }
</style>
